<template>
  <div class="product-filter">
    <!-- 基础筛选区域 -->
    <div class="filter-bar">
      <div class="filter-item">
        <label for="search">商品名称</label>
        <div class="search-input">
          <input 
            type="text" 
            id="search" 
            v-model="filters.search" 
            placeholder="搜索商品名称"
            @input="emitFilters"
          />
          <i class="fas fa-search"></i>
        </div>
      </div>
      
      <div class="filter-item">
        <label for="category">商品分类</label>
        <select 
          id="category" 
          v-model="filters.category" 
          @change="emitFilters"
        >
          <option value="">全部分类</option>
          <option v-for="category in categories" :key="category" :value="category">
            {{ category }}
          </option>
        </select>
      </div>
      
      <div class="filter-item filter-price">
        <label>价格区间</label>
        <div class="price-range">
          <input 
            type="number" 
            v-model.number="filters.minPrice" 
            placeholder="最低价" 
            @input="emitFilters" 
          />
          <span class="price-separator">-</span>
          <input 
            type="number" 
            v-model.number="filters.maxPrice" 
            placeholder="最高价" 
            @input="emitFilters" 
          />
        </div>
      </div>
      
      <div class="filter-item-button">
        <button 
          class="toggle-advanced" 
          @click="toggleAdvanced"
        >
          {{ showAdvanced ? '收起高级筛选' : '高级筛选' }}
          <i :class="showAdvanced ? 'fas fa-angle-up' : 'fas fa-angle-down'"></i>
        </button>
      </div>
    </div>
    
    <!-- 高级筛选折叠面板 -->
    <div class="advanced-filter" v-show="showAdvanced">
      <div class="filter-section">
        <div class="filter-row">
          <div class="filter-item">
            <label for="restaurant">餐厅</label>
            <select 
              id="restaurant" 
              v-model="filters.restaurant" 
              @change="emitFilters"
            >
              <option value="">全部餐厅</option>
              <option v-for="restaurant in restaurants" :key="restaurant" :value="restaurant">
                {{ restaurant }}
              </option>
            </select>
          </div>
          
          <div class="filter-item">
            <label for="status">商品状态</label>
            <select 
              id="status" 
              v-model="filters.status" 
              @change="emitFilters"
            >
              <option value="">全部状态</option>
              <option value="active">已上架</option>
              <option value="inactive">已下架</option>
            </select>
          </div>
          
          <div class="filter-item">
            <label for="hasDiscount">折扣状态</label>
            <select 
              id="hasDiscount" 
              v-model="filters.hasDiscount" 
              @change="emitFilters"
            >
              <option value="">全部商品</option>
              <option value="yes">有折扣</option>
              <option value="no">无折扣</option>
            </select>
          </div>
        </div>
        
        <div class="filter-row">
          <div class="filter-item">
            <label for="rating">最低评分</label>
            <select 
              id="rating" 
              v-model="filters.rating" 
              @change="emitFilters"
            >
              <option value="">不限</option>
              <option value="5">5星</option>
              <option value="4">4星以上</option>
              <option value="3">3星以上</option>
              <option value="2">2星以上</option>
            </select>
          </div>
          
          <div class="filter-item">
            <label for="sortBy">排序方式</label>
            <select 
              id="sortBy" 
              v-model="filters.sortBy" 
              @change="emitFilters"
            >
              <option value="price-asc">价格 (低 → 高)</option>
              <option value="price-desc">价格 (高 → 低)</option>
              <option value="sales-desc">销量 (高 → 低)</option>
              <option value="rating-desc">评分 (高 → 低)</option>
              <option value="commission-desc">佣金 (高 → 低)</option>
              <option value="discount-desc">折扣 (高 → 低)</option>
            </select>
          </div>
          
          <div class="filter-item">
            <div class="checkbox-group">
              <div class="checkbox-item">
                <input 
                  type="checkbox" 
                  id="isHot" 
                  v-model="filters.isHot" 
                  @change="emitFilters" 
                />
                <label for="isHot">热门商品</label>
              </div>
              
              <div class="checkbox-item">
                <input 
                  type="checkbox" 
                  id="isFavorite" 
                  v-model="filters.isFavorite" 
                  @change="emitFilters" 
                />
                <label for="isFavorite">用户喜爱</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 已选筛选条件标签 -->
    <div class="active-filters" v-if="hasActiveFilters">
      <div class="active-filters-title">已选筛选条件:</div>
      <div class="filter-tags">
        <div 
          v-if="filters.search" 
          class="filter-tag"
        >
          名称: {{ filters.search }}
          <button @click="clearFilter('search')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.category" 
          class="filter-tag"
        >
          分类: {{ filters.category }}
          <button @click="clearFilter('category')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.minPrice !== null || filters.maxPrice !== null" 
          class="filter-tag"
        >
          价格: {{ formatPriceRange() }}
          <button @click="clearPriceRange()" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.restaurant" 
          class="filter-tag"
        >
          餐厅: {{ filters.restaurant }}
          <button @click="clearFilter('restaurant')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.status" 
          class="filter-tag"
        >
          状态: {{ filters.status === 'active' ? '已上架' : '已下架' }}
          <button @click="clearFilter('status')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.hasDiscount !== ''" 
          class="filter-tag"
        >
          折扣: {{ filters.hasDiscount === 'yes' ? '有折扣' : '无折扣' }}
          <button @click="clearFilter('hasDiscount')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.rating" 
          class="filter-tag"
        >
          评分: {{ filters.rating }}星以上
          <button @click="clearFilter('rating')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.isHot" 
          class="filter-tag"
        >
          热门商品
          <button @click="clearFilter('isHot')" class="tag-remove">×</button>
        </div>
        
        <div 
          v-if="filters.isFavorite" 
          class="filter-tag"
        >
          用户喜爱
          <button @click="clearFilter('isFavorite')" class="tag-remove">×</button>
        </div>
        
        <button 
          class="clear-all-btn" 
          @click="clearAllFilters"
        >
          清除全部
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  name: 'ProductFilter',
  
  props: {
    initialFilters: {
      type: Object,
      default: () => ({})
    }
  },
  
  emits: ['filter-change'],
  
  setup(props, { emit }) {
    // 高级筛选面板显示状态
    const showAdvanced = ref(false);
    
    // 分类和餐厅数据 - 实际应用中可从API获取
    const categories = [
      '汉堡', '炸鸡', '披萨', '面食', '米饭', '沙拉', '甜点', '饮料'
    ];
    
    const restaurants = [
      '麦当劳', '肯德基', '必胜客', '真功夫', '味千拉面', '星巴克'
    ];
    
    // 筛选条件
    const filters = ref({
      search: '',
      category: '',
      minPrice: null as number | null,
      maxPrice: null as number | null,
      restaurant: '',
      status: '',
      hasDiscount: '',
      rating: '',
      sortBy: 'price-asc',
      isHot: false,
      isFavorite: false,
      ...props.initialFilters
    });
    
    // 判断是否有激活的筛选条件
    const hasActiveFilters = computed(() => {
      return filters.value.search !== '' || 
        filters.value.category !== '' || 
        filters.value.minPrice !== null || 
        filters.value.maxPrice !== null || 
        filters.value.restaurant !== '' || 
        filters.value.status !== '' || 
        filters.value.hasDiscount !== '' || 
        filters.value.rating !== '' || 
        filters.value.isHot || 
        filters.value.isFavorite;
    });
    
    // 切换高级筛选面板
    const toggleAdvanced = () => {
      showAdvanced.value = !showAdvanced.value;
    };
    
    // 发送筛选事件
    const emitFilters = () => {
      emit('filter-change', { ...filters.value });
    };
    
    // 清除单个筛选条件
    const clearFilter = (filterName: string) => {
      if (typeof filters.value[filterName] === 'boolean') {
        filters.value[filterName] = false;
      } else {
        filters.value[filterName] = '';
      }
      emitFilters();
    };
    
    // 清除价格范围
    const clearPriceRange = () => {
      filters.value.minPrice = null;
      filters.value.maxPrice = null;
      emitFilters();
    };
    
    // 清除所有筛选条件
    const clearAllFilters = () => {
      filters.value = {
        search: '',
        category: '',
        minPrice: null,
        maxPrice: null,
        restaurant: '',
        status: '',
        hasDiscount: '',
        rating: '',
        sortBy: 'price-asc',
        isHot: false,
        isFavorite: false
      };
      emitFilters();
    };
    
    // 格式化价格范围显示
    const formatPriceRange = () => {
      if (filters.value.minPrice !== null && filters.value.maxPrice !== null) {
        return `¥${filters.value.minPrice} - ¥${filters.value.maxPrice}`;
      } else if (filters.value.minPrice !== null) {
        return `¥${filters.value.minPrice}以上`;
      } else if (filters.value.maxPrice !== null) {
        return `¥${filters.value.maxPrice}以下`;
      }
      return '';
    };
    
    return {
      showAdvanced,
      categories,
      restaurants,
      filters,
      hasActiveFilters,
      toggleAdvanced,
      emitFilters,
      clearFilter,
      clearPriceRange,
      clearAllFilters,
      formatPriceRange
    };
  }
});
</script>

<style lang="scss" scoped>
.product-filter {
  margin-bottom: 24px;
  
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
    
    .filter-item {
      flex: 1;
      min-width: 180px;
      
      label {
        display: block;
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }
      
      input, select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        
        &:focus {
          outline: none;
          border-color: #4e7df9;
          box-shadow: 0 0 0 3px rgba(78, 125, 249, 0.1);
        }
      }
      
      &.filter-price {
        .price-range {
          display: flex;
          align-items: center;
          
          input {
            flex: 1;
            width: calc(50% - 10px);
          }
          
          .price-separator {
            margin: 0 8px;
            color: #999;
          }
        }
      }
    }
    
    .filter-item-button {
      margin-left: auto;
      
      .toggle-advanced {
        display: inline-flex;
        align-items: center;
        background: none;
        border: none;
        color: #4e7df9;
        font-size: 14px;
        cursor: pointer;
        
        i {
          margin-left: 6px;
          font-size: 12px;
        }
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  
  .search-input {
    position: relative;
    
    input {
      padding-right: 36px;
    }
    
    i {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
  }
  
  .advanced-filter {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #eee;
    
    .filter-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      
      .filter-item {
        flex: 1;
        min-width: 180px;
      }
    }
    
    .checkbox-group {
      display: flex;
      gap: 24px;
      height: 100%;
      align-items: center;
      
      .checkbox-item {
        display: flex;
        align-items: center;
        
        input[type="checkbox"] {
          width: auto;
          margin-right: 8px;
        }
        
        label {
          margin-bottom: 0;
          cursor: pointer;
        }
      }
    }
  }
  
  .active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    
    .active-filters-title {
      font-size: 14px;
      color: #666;
      margin-right: 8px;
    }
    
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-tag {
      display: inline-flex;
      align-items: center;
      background-color: #eef2ff;
      color: #4e7df9;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 16px;
      
      .tag-remove {
        background: none;
        border: none;
        color: #4e7df9;
        font-size: 16px;
        cursor: pointer;
        margin-left: 6px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
          color: #ff4757;
        }
      }
    }
    
    .clear-all-btn {
      background: none;
      border: none;
      color: #ff4757;
      font-size: 13px;
      cursor: pointer;
      margin-left: 8px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@media (max-width: 768px) {
  .product-filter {
    .filter-bar {
      flex-direction: column;
      
      .filter-item, .filter-item-button {
        width: 100%;
      }
      
      .filter-item-button {
        margin-left: 0;
        margin-top: 8px;
      }
    }
    
    .advanced-filter {
      .filter-row {
        flex-direction: column;
      }
    }
  }
}
</style> 